<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .f{
            border: 1px solid #000;
        }
        .relative{
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
            margin: 20px;
            position: relative;
            top: 20px;
            left: 30px;
            right: 20px;
            bottom: 30px;
        }
        .k{
            width: 100px;
            height: 100px;
            border: 1px solid #00f;
            margin: 20px;
        }
    </style>
</head>
<body>
<!-- 
    定位 position
     position：static | relative | absolute | fixed | sticky;
     重点了解两个点：
        1. 是否脱离常规流
        2. 定位基准
     
     静态定位 static，默认值。
        对象遵循常规流。不会影响文档中其他元素。
        此时4个定位偏移属性不会被应用。

     相对定位 relative
        对象遵循常规流。不会影响文档中其他元素。
        偏移定位基准：元素在常规流中原来的位置。
        通过top，right，bottom，left这4个定位偏移属性进行偏移。
        ****非常重要的应用（相对定位方式不会影响文档其他元素，同时又可以变成定位元素）
            只使用position:relative，不设置四个方向偏移。
            用来将该元素设置成后代元素的绝对定位钩子。
    
     固定定位 fixed
        对象脱离常规流
        偏移定位基准：窗口

     绝对定位
        对象脱离常规流
        偏移定位基准：最近的祖先定位元素。
            定位元素
            祖先元素
            最近的
        寻找绝对定位基准的过程
            由父元素开始，逐级寻找定位元素，最近的即为基准。
        使用场合：
            1. 能不用尽量不用，只有在必要的时候采用。
            2. 必要场合。
                a. 相对于某个祖先元素位置固定。
                b. 一般情况下没有兄弟姐妹，或者虽然有，跟兄弟姐妹不一样。

     附着定位 sticky
        relative fixed合体，刚开始不脱离常规流，附着后脱离常规流。
        浏览器兼容性，一般不用。一般使用第三方库(如sticky.js)的方式实现。
      caniuse.com 浏览器兼容情况查询网站
     
    4个定位偏移属性 top right bottom left
    相对于定位基准，
        top    上边空多少。
        right  右边空多少。
        bottom 下边空多少。
        left   左边空多少。
    一般情况下，水平方向和垂直方向均只设置一个。

    定位元素，即定义了position为非static的元素。

    z-index: auto | <integer>
        默认值：auto
        适用于：定位元素。即定义了position为非static的元素。
    
-->
    <div class="f">
        <div class="relative"></div>
        <div class="k"></div>
        <div class="k"></div>
    </div>
    
</body>
</html>